<!--
* @description 消防安全管理单元
!-->
<template>
  <div class="fire-safety-manage-nit-wrap">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="title-card">
          <span class="title-name">{{groupName}}</span>
          <span class="title-points-num" v-show="deductNum > 0">{{'-'+deductNum}}</span>
          <span class="title-points-desc">{{desc}}</span>
        </div>
      </el-col>
      <el-col :span="16">
        <el-row>
          <!-- 消控室值守 -->
          <el-col :span="24">
            <div class="model-title content-card">
              <el-row>
                <el-col :span="3">
                  <img class="model-title-icon" :src="controlRoomMan.icon" />
                </el-col>
                <el-col :span="21">
                  <p class="model-title-name">
                    <span>{{controlRoomMan.name}}</span>
                    <span
                      class="model-title-points-num"
                      v-if="controlRoomMan.deduct > 0"
                    >{{'-' + controlRoomMan.deduct}}</span>
                  </p>
                  <p class="model-title-desc">{{controlRoomMan.title}}</p>
                </el-col>
              </el-row>
            </div>
            <div class="model-content content-card">
              <el-carousel
                v-if="controlRoomMan.deductDetails && controlRoomMan.deductDetails.length > 0"
                class="fire-escape-wrap"
                height="269px"
                arrow="never"
                :class="{'one-carousel-item': controlRoomMan.deductDetails && controlRoomMan.deductDetails.length == 1}"
                :autoplay="false"
              >
                <el-carousel-item v-for="(item, index) in controlRoomMan.deductDetails" :key="index">
                  <el-row>
                    <el-col :span="11">
                      <el-image
                        class="fire-escape-img"
                        @click="$imgViewer"
                        :src="item.picUrl"
                        :data-imgpreview="item.picUrl"
                        fit="cover"
                        alt="无人值守图片"
                      ></el-image>
                    </el-col>
                    <el-col :span="12">
                      <p class="fire-escape-name">{{item.name}}</p>
                      <p class="fire-escape-status" :class="statusClassMap(item.fireTType)">
                        {{item.fireTTypeName}}
                        <span class v-if="item.deduct > 0">{{'-' + item.deduct}}</span>
                      </p>
                      <p class="fire-escape-time">已持续{{item.keepTime}}</p>
                      <el-link type="primary" @click="openVideo(item)">查看监控</el-link>
                    </el-col>
                    <el-col :span="1"></el-col>
                  </el-row>
                </el-carousel-item>
              </el-carousel>
              <div v-else class="no-data">
                <p class="no-data-text">消控室无人值守未实行</p>
              </div>
            </div>
          </el-col>
          <!-- 日常巡检 -->
          <el-col class="daily-inspection" :span="24">
            <div class="model-title content-card">
              <el-row>
                <el-col :span="3">
                  <img class="model-title-icon" :src="dailyInspection.icon" />
                </el-col>
                <el-col :span="21">
                  <p class="model-title-name">
                    <span>{{dailyInspection.name}}</span>
                    <span
                      class="model-title-points-num"
                      v-if="dailyInspection.deduct > 0"
                    >{{'-' + dailyInspection.deduct}}</span>
                  </p>
                  <p class="model-title-desc">{{dailyInspection.title}}</p>
                </el-col>
              </el-row>
            </div>
            <div class="model-content content-card">
              <div
                class="piechart-wrap"
                v-if="dailyInspection.deductDetails && dailyInspection.deductDetails.length > 0"
              >
                <div class="piechart-item">
                  <div id="undonePiechart" :style="{width: '300px', height: '180px'}"></div>
                  <p class="piechart-desc">上期末完成点数{{undonePointNum}}</p>
                </div>
                <div class="piechart-item">
                  <div id="donePiechart" :style="{width: '300px', height: '180px'}"></div>
                  <p class="piechart-desc">上期已完成点数{{donePointNum}}</p>
                </div>
              </div>
              <div v-else class="no-data">
                <p class="no-data-text">单位未配置巡检</p>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <!-- 隐患整改 -->
      <el-col class="hidden-dangers" :span="8">
        <div class="model-title content-card">
          <el-row>
            <el-col :span="6">
              <img class="model-title-icon" :src="hiddenDangers.icon" />
            </el-col>
            <el-col :span="18">
              <p class="model-title-name">
                <span>{{hiddenDangers.name}}</span>
                <span class="model-title-points-num" v-if="hiddenDangers.deduct > 0">{{'-' + hiddenDangers.deduct}}</span>
              </p>
              <p class="model-title-desc">
                <span>{{hiddenDangers.title}}</span>
                <span style="float: right;">{{hiddenDangers.remarks}}</span>
              </p>
            </el-col>
          </el-row>
        </div>
        <!-- 隐患整改 -->
        <div class="model-content content-card">
          <div
            v-for="(item,i) in hiddenDangers.deductDetails"
            class="content-card-buildStuff"
            v-show="currentPageIndex==i+1"
            :key="i"
          >
            <div
              class="content-card-buildStuff-imgPreview"
              @click="$imgViewer"
              :data-imgpreview="item.picUrls.split(',')"
              :data-imgpreviewindex="previewIndex"
            >
              <el-image
                v-if="'mp4,3gp,mpeg,mavip4,mov,flv'.includes(imgPreviewSrc.split('.')[imgPreviewSrc.split('.').length - 1].toLowerCase())"
                :src="require('@/assets/images/video/video-detail.png')"
                fit="cover"
                alt="图片"
              ></el-image>
              <el-image v-else fit="cover" alt="图片" :src="imgPreviewSrc"></el-image>
            </div>
            <div style="margin-bottom: 20px;" class="content-card-buildStuff-pics">
              <template v-for="(srcItem,index) in item.picUrls.split(',')">
                <el-image
                  v-if="'mp4,3gp,mpeg,mavip4,mov,flv'.includes(srcItem.split('.')[srcItem.split('.').length - 1].toLowerCase())"
                  @click.native="switchImgPreview(srcItem, index)"
                  fit="cover"
                  alt="图片"
                  :src="require('@/assets/images/video/video-detail.png')"
                  :key="index"
                ></el-image>
                <el-image
                  v-else
                  @click.native="switchImgPreview(srcItem, index)"
                  fit="cover"
                  alt="图片"
                  :src="srcItem"
                  :key="index"
                ></el-image>
              </template>
            </div>
            <div class="content-card-buildStuff-status">
              <div v-if="item.categoryName" class="content-card-buildStuff-status-left">{{item.categoryName}}</div>
              <div
                v-if="item.continueTimeStr"
                class="content-card-buildStuff-status-right"
                :class="{'bg-color-1': item.continueTimeStr == '超期'}"
              >{{item.continueTimeStr}}</div>
            </div>
            <div class="content-card-buildStuff-desc">
              <p>{{item.hiddenDangerDesc}}</p>
              <span style="color: #FD5E5E;">-{{item.deduct}}</span>
            </div>
            <div class="content-card-buildStuff-statusmore">
              <span>{{item.gradeName}}</span>
              <span style="padding-left: 15px;">{{item.status==1?"整改中":(item.status==2?"已完成":"审核中")}}</span>
            </div>
          </div>
          <el-pagination
            v-if="currentPageTotal!=0"
            style="text-align: right;"
            background
            @current-change="pageChange"
            :current-page="currentPageIndex"
            :page-size="1"
            :total="currentPageTotal"
            layout="pager"
          ></el-pagination>
          <div v-else class="no-data">
            <p class="no-data-text">当前无隐患</p>
          </div>
        </div>
      </el-col>
      <!-- 维保 -->
      <el-col class="maintenance-pie-echarts-wrap" :span="24">
        <el-row :gutter="20">
          <el-col v-for="(item, index) in maintenanceData" :key="index" :span="6">
            <div class="model-title content-card">
              <el-row>
                <el-col :span="6">
                  <img class="model-title-icon" :src="item.icon" />
                </el-col>
                <el-col :span="18">
                  <p class="model-title-name">
                    <span>{{item.name}}</span>
                    <span class="model-title-points-num" v-if="item.deduct > 0">{{'-' + item.deduct}}</span>
                  </p>
                  <p
                    class="model-title-desc"
                  >上期共有{{item.deductDetails[0].beforeUndoCount}}个任务未完成，其中有{{item.deductDetails[0].advanceCount}}个本期已经提前完成</p>
                </el-col>
              </el-row>
            </div>
            <div class="model-content content-card" style="padding: 15px 0;">
              <!-- 饼图 -->
              <!-- <div :id="'maintenancePieEcharts_'+item.objId" :style="{width: '288px', height: '215px'}"></div> -->
              <!-- 柱状图 -->
              <div :id="'maintenancePieEcharts_'+item.objId" :style="{width: '100%', height: '215px'}"></div>
              <p style="text-align: center;">
                <el-link
                  v-if="item.deduct > 0"
                  :type="item.deduct > 0 ? 'primary' : 'info'"
                  :disabled="item.deduct > 0 ? false : true"
                  @click="openDetail(index)"
                >查看扣分明细</el-link>
              </p>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="24">
        <div class="content-card" v-if="!loading">
          <div class="color-card-wrap">
            <div class="points-card-item person">
              <el-row>
                <el-col :span="20">
                  <p class="color-card-title">{{personnelQualifications.name}}</p>
                  <p
                    class="color-card-desc"
                    v-if="personnelQualifications.deductDetails"
                  >{{personnelQualifications.deductDetails[0].desc}}</p>
                </el-col>
                <el-col :span="4">
                  <p
                    v-if="personnelQualifications.deduct > 0"
                    class="color-card-point color-1"
                  >{{'-' + personnelQualifications.deduct}}</p>
                  <p v-else class="color-card-point iconfont icon-duigou color-3"></p>
                </el-col>
              </el-row>
            </div>
            <div class="points-card-item safemanage">
              <el-row>
                <el-col :span="20">
                  <p class="color-card-title">{{safeManagement.name}}</p>
                  <p
                    class="color-card-desc"
                    v-if="safeManagement.deductDetails"
                  >{{safeManagement.deductDetails[0].desc}}</p>
                </el-col>
                <el-col :span="4">
                  <p v-if="safeManagement.deduct > 0" class="color-card-point color-1">{{'-' + safeManagement.deduct}}</p>
                  <p v-else class="color-card-point iconfont icon-duigou color-3"></p>
                </el-col>
              </el-row>
            </div>
            <div class="points-card-item emergencyplan">
              <el-row>
                <el-col :span="20">
                  <p class="color-card-title">{{emergencyResponsePlan.name}}</p>
                  <p
                    class="color-card-desc"
                    v-if="emergencyResponsePlan.deductDetails"
                  >{{emergencyResponsePlan.deductDetails[0].desc}}</p>
                </el-col>
                <el-col :span="4">
                  <p
                    v-if="emergencyResponsePlan.deduct > 0"
                    class="color-card-point color-1"
                  >{{'-' + emergencyResponsePlan.deduct}}</p>
                  <p v-else class="color-card-point iconfont icon-duigou color-3"></p>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      :close-on-click-modal="false"
      title="扣分明细"
      width="600px"
      top="25vh"
      :visible.sync="dialogDetail"
      @close="dialogDetail = false"
    >
      <el-table :data="tableData" height="400" style="width: 100%">
        <el-table-column prop="taskName" label="扣分明细"></el-table-column>
        <el-table-column prop="deduct" label="扣分" width="100"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getSafetyGroup } from '@/api/home'
import util from '@/utils/util'

export default {
  name: 'FacUnit',
  props: {
    orgId: {
      required: true,
    },
    safetyRecordId: {
      required: true,
    },
    groupId: {
      required: true,
    },
  },
  data() {
    return {
      previewIndex: 0,
      loading: true,
      groupName: '',
      desc: '',
      deductNum: '',
      controlRoomMan: {}, // 消控室值守
      hiddenDangers: {}, // 隐患整改
      dailyInspection: {}, // 日常巡检
      personnelQualifications: {}, // 人员资质
      safeManagement: {}, // 安全管理制度
      emergencyResponsePlan: {}, // 应急预案
      currentPageIndex: 1,
      currentPageTotal: 0,
      imgPreviewSrc: '',
      maintenanceData: [], // 维保数据
      dialogDetail: false,
      tableData: [],
    }
  },
  computed: {
    undonePointNum() {
      let num = 0
      ;(this.dailyInspection.deductDetails || []).forEach((n) => {
        num += n.undonePointCount || 0
      })
      return num
    },
    donePointNum() {
      let num = 0
      ;(this.dailyInspection.deductDetails || []).forEach((n) => {
        num += n.pointCount - n.undonePointCount || 0
      })
      return num
    },
    pointCount() {
      let num = 0
      ;(this.dailyInspection.deductDetails || []).forEach((n) => {
        num += n.pointCount
      })
      return num
    },
  },
  created() {
    this.getDetailData()
  },
  methods: {
    getDetailData() {
      let that = this
      let parames = {
        orgId: that.orgId,
        groupId: that.groupId,
        safetyRecordsId: that.safetyRecordId,
      }
      getSafetyGroup(parames).then((res) => {
        if (res.status === 200) {
          that.groupName = res.data.groupName || '消防设施单元'
          that.deductNum = res.data.deduct
          that.desc = res.data.title
          for (var i = 0, len = res.data.details.length; i < len; i++) {
            let obj = res.data.details[i]
            switch (obj.objId) {
              case '1':
                // 消控室值班
                that.controlRoomMan = obj
                break
              case '2':
                // 日常巡检
                that.dailyInspection = obj
                that.$nextTick(() => {
                  that.initEcharts(obj.deductDetails)
                })
                break
              case '3':
                // 隐患整改
                that.hiddenDangers = obj
                that.currentPageTotal = that.hiddenDangers.deductDetails.length
                that.imgPreviewSrc =
                  that.currentPageTotal > 0
                    ? that.hiddenDangers.deductDetails[0].picUrls.split(',')[0]
                    : ''
                break
              case '4':
              case '5':
              case '6':
              case '7':
                that.maintenanceData.push(obj)
                that.$nextTick(() => {
                  that.initMaintenanceEcharts(obj.objId, obj.deductDetails)
                })
                break
              case '8':
                // 人员资质
                that.personnelQualifications = obj
                break
              case '9':
                // 安全管理制度
                that.safeManagement = obj
                break
              case '10':
                // 应急预案
                that.emergencyResponsePlan = obj
                break
              default:
                break
            }
          }
          that.loading = false
        }
      })
    },
    pageChange(val) {
      //翻页
      this.currentPageIndex = val
      this.imgPreviewSrc =
        this.currentPageTotal > 0
          ? this.hiddenDangers.deductDetails[val - 1].picUrls.split(',')[0]
          : ''
    },
    statusClassMap(id) {
      const FIRETYPECLASSMAP = {
        0: 'color-3',
        10: 'color-1',
        20: 'color-2',
        30: 'color-5',
        40: 'color-8',
      }

      return FIRETYPECLASSMAP[id] || 'color-4'
    },
    // 画饼图
    initEcharts(data) {
      let that = this
      if (data.length > 0) {
        let obj = {
          doneNum: this.donePointNum,
          undoneNum: this.undonePointNum,
          sumNum: this.pointCount,
        }
        that.initUndoneEcharts(obj)
        that.initDoneEcharts(obj)
      }
    },
    initUndoneEcharts(data) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(
        document.getElementById('undonePiechart')
      )
      // 绘制图表
      myChart.setOption({
        color: ['#4CA4FE', '#B7B7B7'],
        title: {
          text: ((data.undoneNum / data.sumNum) * 100).toFixed(0) + '%',
          x: 'center',
          y: 'center',
          textStyle: {
            fontWeight: 'normal',
            color: '#5F6884',
            fontSize: '25',
          },
        },
        series: [
          {
            name: '未完成情况图',
            type: 'pie',
            radius: ['70%', '90%'],
            hoverAnimation: false,
            data: [
              {
                name: '',
                value: data.undoneNum,
                z: 5,
                labelLine: {
                  show: false,
                  emphasis: {
                    show: false,
                  },
                },
                label: {
                  normal: {
                    position: 'inner', //隐藏引导线
                    show: false, //隐藏标识文字
                  },
                },
              },
              {
                name: '',
                value: data.doneNum,
                labelLine: {
                  show: false,
                  emphasis: {
                    show: false,
                  },
                },
              },
            ],
          },
        ],
      })
    },
    initDoneEcharts(data) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('donePiechart'))
      // 绘制图表
      myChart.setOption({
        color: ['#4CA4FE', '#B7B7B7'],
        title: {
          text: ((data.doneNum / data.sumNum) * 100).toFixed(0) + '%',
          x: 'center',
          y: 'center',
          textStyle: {
            fontWeight: 'normal',
            color: '#5F6884',
            fontSize: '25',
          },
        },
        series: [
          {
            name: '未完成情况图',
            type: 'pie',
            radius: ['70%', '90%'],
            hoverAnimation: false,
            data: [
              {
                name: '',
                value: data.doneNum,
                z: 5,
                labelLine: {
                  show: false,
                  emphasis: {
                    show: false,
                  },
                },
                label: {
                  normal: {
                    position: 'inner', //隐藏引导线
                    show: false, //隐藏标识文字
                  },
                },
              },
              {
                name: '',
                value: data.undoneNum,
                labelLine: {
                  show: false,
                  emphasis: {
                    show: false,
                  },
                },
              },
            ],
          },
        ],
      })
    },
    // 查看监控
    openVideo(data) {
      util.rowShowVedio({
        fcFacilitiesId: data.fcfId || '',
        organizationId: data.orgId || this.$store.state.userinfo.org.id,
        serverId: '',
      })
    },
    switchImgPreview(srcItem, index) {
      this.previewIndex = index
      this.imgPreviewSrc = srcItem
    },
    // 维保饼图
    initMaintenanceEcharts(id, data) {
      let that = this
      const COLORMAP = {
        4: '#4CA4FE',
        5: '#71D9BF',
        6: '#53C1E8',
        7: '#7477F1',
      }
      if (data.length > 0) {
        let obj = {
          done: [
            data[0].before.count - data[0].before.unCompleteCount,
            data[0].after.count - data[0].after.unCompleteCount,
          ],
          undone: [
            data[0].before.unCompleteCount,
            data[0].after.unCompleteCount,
          ],
          domId: 'maintenancePieEcharts_' + id,
          // doneNum: data[0].count - data[0].unCompleteCount,
          // undoneNum: data[0].unCompleteCount,
          // sumNum: data[0].count,
          color: COLORMAP[id],
        }
        // that.renderMaintenancePieEcharts(obj)
        that.renderMaintenanceBarEcharts(obj)
      }
    },
    renderMaintenancePieEcharts(data) {
      let that = this
      let myChart = this.$echarts.init(document.getElementById(data.domId))
      myChart.setOption({
        color: [data.color, '#EFEEEF'],
        tooltip: {},
        series: [
          {
            name: '完成情况',
            type: 'pie',
            radius: '60%',
            center: ['49%', '50%'],
            data: [
              {
                value: data.doneNum,
                name: '已完成',
                itemStyle: { color: data.color },
              },
              {
                value: data.undoneNum,
                name: '未完成',
                itemStyle: { color: '#999999' },
              },
            ],
            label: {
              normal: {
                // position: 'inside',
                formatter: ['{b}', '（{c}，{d}%)'].join('\n'),
                fontSize: '14',
              },
            },
            labelLine: {
              length: 0,
              length2: 10,
            },
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      })
    },
    renderMaintenanceBarEcharts(data) {
      let that = this
      let myChart = this.$echarts.init(document.getElementById(data.domId))
      myChart.setOption({
        color: ['#71D9BF', '#B7B7B7'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'none', // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: '',
        },
        grid: {
          left: '20px',
          right: '20px',
          bottom: '25px',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: ['上期', '本期'],
        },
        yAxis: {
          type: 'value',
          show: false,
        },
        series: [
          {
            name: '完成',
            data: data.done,
            stack: '完成状况',
            type: 'bar',
            barWidth: 50,
          },
          {
            name: '未完成',
            data: data.undone,
            stack: '完成状况',
            type: 'bar',
            barWidth: 50,
          },
        ],
      })
    },
    // 查看扣分明细
    openDetail(index) {
      let that = this
      let newArr = []
      let oldData = that.maintenanceData[index].deductDetails[0].before.details
      for (let i = 0, len = oldData.length; i < len; i++) {
        if (oldData[i].isDeduct) {
          newArr.push(oldData[i])
        }
      }
      that.tableData = newArr
      that.dialogDetail = true
    },
    // 更新/刷新模块
    refreshModel() {
      this.getDetailData()
    },
  },
}
</script>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.fire-safety-manage-nit-wrap {
  width: 1200px;
  .model-content {
    margin-top: 0;
    border-top: none;
  }
  .daily-inspection {
    .model-content {
      height: 230px;
      .piechart-wrap {
        display: flex;
        justify-content: center;
        .piechart-item {
          width: 300px;
          .piechart-desc {
            text-align: center;
            font-size: 14px;
            color: #8890ab;
          }
        }
      }
    }
  }
  .hidden-dangers {
    .model-content {
      height: 642px;
    }
  }
  .maintenance-pie-echarts-wrap {
    .model-content {
      height: 260px;
    }
  }
  .color-card-wrap {
    display: flex;
    .points-card-item {
      border-radius: 8px;
      padding-left: 30px;
      height: 100px;
      color: #fff;
      .color-card-title {
        height: 26px;
        line-height: 26px;
        font-size: 22px;
      }
      .color-card-desc {
        margin-top: 10px;
        height: 16px;
        line-height: 16px;
        font-weight: unset;
      }
      .color-card-point {
        float: right;
        width: 30px;
        height: 30px;
        line-height: 30px;
        border-radius: 50%;
        text-align: center;
        background-color: #fff;
      }
    }
    .person {
      background: linear-gradient(to right, #4ca4fe, #62c6ff);
    }
    .safemanage {
      background: linear-gradient(to right, #7067e2, #7886ff);
    }
    .emergencyplan {
      background: linear-gradient(to right, #ffb32d, #f9ce6b);
    }
  }
  .content-card-buildStuff-status {
    .bg-color-1 {
      background-color: #fd5e5e;
    }
  }
}
</style>
